<template>
  <div class="register">
    <span class="title">面试指南平台</span>
    <el-form :model="formData" :rules="rules" ref="formData">
      <div class="inputBox">
        <el-form-item prop="userEmail">
          <el-input v-model="formData.userEmail" placeholder="请输入您的邮箱" />
        </el-form-item>
        <div class="email">
          <el-form-item prop="verificationCode">
            <el-input
              v-model="formData.verificationCode"
              class="verificationCode"
              placeholder="请输入您的邮箱验证码"
            />
          </el-form-item>
          <el-button
            class="emailBtn"
            @click="getEmailCode"
            :disabled="showEmileBtn"
            >{{ emailBtnText | timeFilter }}</el-button
          >
        </div>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="formData.password"
            class="password"
            placeholder="请输入您的密码"
            show-password
          />
        </el-form-item>
        <el-form-item prop="aginPassword">
          <el-input
            type="password"
            class="aginPassword"
            v-model="formData.aginPassword"
            placeholder="请再次输入您的密码"
            show-password
          />
        </el-form-item>
      </div>
      <el-button
        class="loginButton"
        type="primary"
        @click="register('formData')"
        >完成注册</el-button
      >
      <el-form-item prop="agree">
        <div class="footer">
          <div class="autoLogin">
            <input
              id="checkAgree"
              type="checkbox"
              v-model="formData.agree"
              class="checkbox"
            />
            <label for="checkAgree">
              <span class="checkboxLabel"
                >我已阅读并同意用户协议和隐私政策</span
              >
            </label>
          </div>
          <div class="registOrForget">
            <span @click="goForgetPwd">忘记密码</span> -
            <span @click="toLogin">登录</span>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { checkEmail, checkPassword, checkEmailcode } from '@/utils/user.utils'
export default {
  name: 'RegisterBox',
  data() {
    // 校验用户邮箱格式
    const validatorUserEmail = (rule, value, callback) => {
      if (!checkEmail(value)) callback(new Error('请输入正确的邮箱格式'))
      callback()
    }
    // 校验用户邮箱验证码格式
    const validatorUserPassword = (rule, value, callback) => {
      if (!checkPassword(value))
        callback(
          new Error('请输入字母(大、小写均可)和数字组合且长度不短于6位的密码')
        )
      callback()
    }
    // 校验用户密码格式
    const validatorVerificationCode = (rule, value, callback) => {
      if (!checkEmailcode(value)) callback(new Error('验证码格式不正确'))
      callback()
    }
    // 校验用户两次密码是否一致
    const validatorUserPasswordAgain = (rule, value, callback) => {
      if (value !== this.formData.password)
        callback(new Error('与第一次输入的密码不一致'))
      callback()
    }
    // TODO:校验用户是否同意用户协议与隐私政策
    const validatorAgree = (rule, value, callback) => {
      if (!value) callback(new Error('请勾选同意用户协议和隐私政策'))
      callback()
    }
    return {
      // 获取邮箱验证码按钮是否可点击
      showEmileBtn: false,
      //获取邮箱验证码按钮上的文本
      emailBtnText: '获取邮箱验证码',
      // 是否同意隐私协议
      formData: {
        userEmail: '',
        verificationCode: '',
        password: '',
        aginPassword: '',
        agree: false
      },
      rules: {
        userEmail: [
          { required: true, validator: validatorUserEmail, trigger: 'blur' }
        ],
        password: [
          { required: true, validator: validatorUserPassword, trigger: 'blur' }
        ],
        verificationCode: [
          {
            required: true,
            validator: validatorVerificationCode,
            trigger: 'blur'
          }
        ],
        aginPassword: [
          {
            required: true,
            validator: validatorUserPasswordAgain,
            trigger: 'blur'
          }
        ],
        agree: [
          {
            required: true,
            trigger: 'blur',
            validator: validatorAgree
          }
        ]
      }
    }
  },
  filters: {
    //获取邮箱验证码按钮上的文本
    timeFilter(val) {
      if (typeof val === 'number') {
        return val + 's'
      } else {
        return val
      }
    }
  },
  methods: {
    //获取邮箱验证码
    getEmailCode() {
      this.$refs.formData.validateField('userEmail', (err) => {
        if (err) return
        this.$emit(
          'getEmailCode',
          this.formData.userEmail,
          this.changeSendEmailBtn
        )
      })
    },
    //TODO:清除计时器 改变发送邮件按钮状态
    changeSendEmailBtn() {
      this.showEmileBtn = true
      this.emailBtnText = 30
      const timer = setInterval(() => {
        if (this.emailBtnText === 0) {
          this.showEmileBtn = false
          this.emailBtnText = '获取邮箱验证码'
          clearInterval(timer)
          return
        }
        this.emailBtnText--
      }, 1000)
    },
    //注册按钮
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) this.$emit('register', this.formData)
        return
      })
    },
    // 点击登录按钮
    toLogin() {
      this.$router.push('/login')
    },
    // 点击忘记密码按钮
    goForgetPwd() {
      this.$message({
        message: '开发中...'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.register {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 600px;
  border-radius: 10px;
  box-shadow: 0 0 4px #ccc;
  background-color: #fff;
  padding: 50px 80px;
  text-align: center;
  .title {
    font-size: 22px;
    letter-spacing: 3px;
  }
  .inputBox {
    margin-top: 50px;
    text-align: left;
    .email {
      display: flex;
      justify-content: space-between;
      .verificationCode {
        margin-top: 6px;
        width: 184px;
      }
      .emailBtn {
        width: 140px;
        margin-top: 6px;
        height: 52px;
        letter-spacing: 1px;
      }
    }
    .aginPassword {
      margin-top: 6px;
    }
    .password {
      margin-top: 6px;
    }
  }
  .loginButton {
    height: 50px;
    margin-top: 10px;
    width: 100%;
  }
  .footer {
    font-size: 13px;
    color: #999;
    overflow: hidden;
    .autoLogin {
      float: left;
      vertical-align: middle;

      .checkbox {
        vertical-align: middle;
        cursor: pointer;
      }
      .checkboxLabel {
        cursor: pointer;
      }
    }
    .registOrForget {
      float: right;
      cursor: pointer;
    }
  }
}
</style>



